<template>
  <div class="desc">
    <div class="desc-title">
      <span class="title">{{ lang.desc_title }}</span>
    </div>
    <div class="desc-list">
      <p v-for="item in descItems" :key="item.id" class="desc-item">
        {{ item.text }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("activity/days-cards");

const descItems = ref([
  { id: 1, text: lang.desc_1 },
  { id: 2, text: lang.desc_2 },
  { id: 3, text: lang.desc_3 },
  { id: 4, text: lang.desc_4 },
]);
</script>

<style scoped lang="scss">
.desc {
  font-weight: 400;
  font-size: 0.35rem;
  margin-top: 0.5rem;
  box-sizing: border-box;
  padding-bottom: 1rem;

  .desc-title {
    display: flex;
    align-items: center;
    font-family: Arial;

    .title {
      color: var(--theme-neutral1);
      font-size: 0.44rem;
    }
  }

  .desc-list {
    font-size: 0.34rem;
    color: var(--theme-neutral2);

    .desc-item {
      margin-top: 0.2rem;
      text-indent: -1em;
      padding-left: 1em;
    }
  }
}
</style>
